<template>
    <div class="enclosure-wrapper">
        <div v-if="enclosureList!=0">
            <div class="enclosure-info" v-for="(item,index) in enclosureList" :key="index">
                <div class="enclosure-type">
                    <div class="enclosure-typepic">{{item.fileType.toUpperCase()}}</div>
                </div>
                <div class="enclosure-content">
                    <div class="enclosure-name">{{item.name}}</div>
                    <div class="enclosure-infonr">
                        <div class="infos"><span>上传时间：</span>{{item.createdAt | formatTim}}<span>大小：</span>{{item.size/1000}}kb</div>
                        <div class="enclosure-btn">
                            <div class="enclosure-download" @click="downenclosureList(item.id)">下载</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="noEnclosure" v-else>
          <div class="noEnclosurebg">
            <img src="../../images/xiajiazhuangtai.png"/>
            <div class="notify-word">暂无任何通知</div>
          </div>
        </div>
    </div>
</template>
<script>
import { mapGetters} from 'vuex'
import { getMaterialList,downloadMaterialList } from "api/getData"
export default {
    data(){
        return{
            enclosureList:[]
        }
    },
    computed:{
        ...mapGetters([
        'currentUser'
        ])
    },
    mounted(){
        this.getMsList()
    },
    filters: {
    formatTim(timeData) {
      let data, YY, MM, DD, hh, mm,
        that = this,
        addZero = n => n < 10 ? '0' + n : '' + n;

      data = new Date(timeData * 1)
      YY = data.getFullYear()
      MM = addZero(data.getMonth() + 1)
      DD = addZero(data.getDate())
      hh = addZero(data.getHours())
      mm = addZero(data.getMinutes())
      return `${YY}-${MM}-${DD}  ${hh}:${mm}`
    }
    },
    methods:{
        getMsList(){
            getMaterialList(this.currentUser.cluesOrStuId.toString()).then(res=>{
                if(res.code=='0')
                {
                    let enclosureLists=res.data.list,
                        matList=[];
                    enclosureLists.forEach(item=>{
                        if(item.type=='1')
                        {
                          matList.push(item)
                        }
                    })
                    this.enclosureList=matList
                }
            })
        },
        downenclosureList(ids){
            let url = window.BASE_URL + 'api/material/downFile?id='+ids;
            window.open(url,'_slef')
        }
    }
}
</script>
<style lang="stylus" scoped>
    .enclosure-wrapper
      background:#f5f5f5;
      padding-bottom:120px;
      .enclosure-info
        width:1200px;
        height:168px;
        background:rgba(255,255,255,1);
        box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.08);
        border-radius:4px;
        margin:30px auto 0;
        display:flex;
        align-items:center
        .enclosure-type
          margin-left:18px;
          .enclosure-typepic
            width: 70px;
            height: 70px;
            background: rgba(48,192,96,1);
            border-radius: 50%;
            font-size: 18px;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: rgba(255,255,255,1);
            text-align: center;
            line-height: 70px;
        .enclosure-content
          height: 168px;
          margin-left:30px;
          flex:1
          .enclosure-name
            margin-top: 38px;
            font-size: 26px;
            font-family: MicrosoftYaHei-Bold;
            font-weight: bold;
            color: rgba(32,32,32,1);
          .enclosure-infonr
            display:flex
            margin-top:46px
            .infos
              font-size:14px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              color:rgba(32,32,32,1);
              line-height: 46px;
              flex:1
              span 
                color:rgba(164,164,164,1);
                margin-right:17px;
                margin-left:30px
                &:first-child
                  margin-left:0
            .enclosure-btn
              display:flex;
              align-items:center
              .enclosure-download
                width:144px;
                height:44px;
                background:rgba(255,239,237,1);
                border:1px solid rgba(255,98,82,1);
                border-radius:2px;
                font-size:18px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(255,98,82,1);
                text-align:center;
                line-height 46px;
                margin-right:20px 
      .noEnclosure
        text-align: center;
        height: 329px;
        background:#f5f5f5;
        padding-bottom:111px
        .noEnclosurebg
          background:#f5f5f5;
          height:329px
          img 
            width: 123px;
            height: 151px;
            margin-top:150px
          .notify-word
            margin-top:25px;
            font-size:16px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(164,164,164,1);
</style>